<template>
  <div class="trust-form">
    <div class="trust-form-wrapper">
      <slot/>
    </div>
    <slot
      v-if="$slots.btn"
      name="btn"
    />
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'Form',
    provide () {
      return {
        FormProvider: this
      }
    },
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      model: {
        type: Object,
        default () {
          return {}
        }
      },
      rules: {
        type: Object,
        default () {
          return {}
        }
      }
    }
  }
</script>

<style
  lang="stylus"
  rel="stylesheet/stylus"
  type="text/stylus">
  .trust-form
    width: 100%
    height: 100%
    display: flex
    flex-direction: column
    box-sizing: border-box

    &-wrapper
      flex: 1
      background-color: transparent
      overflow-x: hidden
      overflow-y: auto
      -webkit-overflow-scrolling: touch
</style>
